import { transformConfig } from '@/utils/customModule';
import { Image, View } from '@tarojs/components';
import React from 'react';
import Taro from '@tarojs/taro';
import './index.scss';
import { navigateTo } from '../utils';

const styleConfig = {
  imgItem: {
    borderRadius: 'borderRadius',
    marginBottom: 'imgMargin',
  },
};

const ModuleImgVertical = ({ imgUrlList, styleSettingRender }) => {
  const style = transformConfig(styleSettingRender, styleConfig);

  return (
    <View className="ModuleImgVertical">
      <View className="img-container" style={style.module}>
        {imgUrlList?.map(({ imageUrl, url, qrCode = 2 }) => {
          return (
            <View
              className="img-item"
              key={imageUrl}
              style={style.imgItem}
              onClick={() => {
                if (qrCode == 1) {
                  Taro.previewImage({
                    urls: [imageUrl],
                  });
                } else {
                  if(!url || url == '#') return;
                  navigateTo(url);
                }
              }}
            >
              <Image className="img" src={imageUrl} mode="widthFix" />
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default ModuleImgVertical;
